<template>
  <div>
    <el-row style="margin-top:20px;" :gutter="20">
      <el-col :span="4" style="margin:0 30px;">
        <v-calendar :attributes="attrs" is-explanded />
      </el-col>
      <el-col :span="17">
        <el-card :body-style="{ padding: '5px' }" style="height:265px;">
          <div slot="header">
            <span>今日待办（{{ todos.length }}）</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="TodosVisible = true"
              >设置</el-button
            >
          </div>
          <div v-for="(todo, index) in todos" :key="index" class="text">
            <p>
              <el-tag style="margin:0 10px;">{{ todo.title }}</el-tag
              >{{ todo.content }}
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 待办事项对话框 -->
    <el-dialog title="设置待办" :visible.sync="TodosVisible">
      <el-form
        :model="todoForm"
        label-position="left"
        label-width="80px"
        :rules="todoRules"
        ref="todoRef"
      >
        <el-form-item label="TODO" prop="TODO">
          <el-input v-model="todoForm.TODO"></el-input>
        </el-form-item>
        <el-form-item label="提醒时间" prop="time">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="todoForm.time"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="标签">
          <el-radio-group v-model="todoForm.tag" size="mini">
            <el-radio-button label="新闻公告"></el-radio-button>
            <el-radio-button label="请假出差"></el-radio-button>
            <el-radio-button label="工作办公"></el-radio-button>
            <el-radio-button label="绩效评测"></el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setTodo">确 定</el-button>
        <el-button @click="TodosVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getTodos, setTodo } from "@/api/employee";

export default {
  name:'console-header',
  data() {
    return {
      attrs: [
        {
          key: "today",
          highlight: "red",
          dates: new Date()
        }
      ],
      todos: [],
      TodosVisible: false,
      todoForm: {
        TODO: "",
        time: "",
        tag: ""
      },
      todoRules: {
        TODO: [{ required: true, message: "请输入待办事项", trigger: "blur" }],
        time: [{ required: true, message: "请输入提醒时间", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getTodos();
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    async getTodos() {
      const res = await getTodos(this.userInfo.userId);
      if (res.code == 200) {
        this.todos = res.data.todos;
      }
    },
    setTodo() {
      this.$refs.todoRef.validate(async valid => {
        if (!valid) return;
        const res = await setTodo(this.todoForm);
        if (res.code == 200) {
          this.$message.success("设置成功");
          this.TodosVisible = false;
        }
      });
    }
  }
};
</script>

